<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#myCanvas {
				background-color: #bfa;
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas" width="500" height="500"></canvas>
		<button id="btn">查看分数</button>
		<script src="./index.js"></script>
		<script>
			var canvas = document.getElementById("myCanvas");
			var btn = document.getElementById("btn")
			var ctx = canvas.getContext("2d");
			let counts = 0,
				date = ''
			let db;
			var ball = {
				x: 250,
				y: 250,
				r: 10,
				vx: 5,
				vy: -5
			};
			var paddle = {
				x: 200,
				y: 480,
				w: 100,
				h: 10
			};

			function render() {
				// 清除画布
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				// 绘制球和挡板
				ctx.beginPath();
				ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2);
				ctx.fillStyle = "#0095DD";
				ctx.fill();
				ctx.closePath();
				ctx.beginPath();
				ctx.rect(paddle.x, paddle.y, paddle.w, paddle.h);
				ctx.fillStyle = "#0095DD";
				ctx.fill();
				ctx.closePath();
			}

			function update() {
				// 更新球的位置
				ball.x += ball.vx;
				ball.y += ball.vy;
				if (ball.x + ball.r > canvas.width || ball.x - ball.r < 0) {
					// console.log('ball.vx=', ball.vx);
					ball.vx = -ball.vx;
				}
				if (ball.y - ball.r < 0) {
					// console.log('ball.y=', ball.y);
					ball.vy = -ball.vy;
				} else if (ball.y + ball.r > canvas.height - paddle.h) {
					if (ball.x > paddle.x && ball.x < paddle.x + paddle.w) {
						ball.vy = -ball.vy;
						// console.log('ball.y ///=', ball.y);
					} else {
						alert("闯关失败啦");
						clearInterval(intervalId);
					}
				}

				// 更新挡板的位置
				if (rightPressed && paddle.x < canvas.width - paddle.w) {
					// console.log('rightPressed');
					paddle.x += 7;
					// console.log('paddle.x=', paddle.x);
				} else if (leftPressed && paddle.x > 0) {
					// console.log('leftPressed');
					paddle.x -= 7;
					// console.log('paddle.y=', paddle.y);
				}

				// 如果球的位置和挡板的位置重合
				if (ball.y >= paddle.y) {
					counts++
				}

			}
			// 定时更新画面
			var intervalId = setInterval(function() {
				render();
				update();
			}, 10);


			const request = indexedDB.open('highScores', 1); //创建 Indexed DB 数据库

			request.onupgradeneeded = function(event) { //创建对象存储区
				const db = event.target.result;
				const objectStore = db.createObjectStore('highScores', {
					keyPath: 'id',
					autoIncrement: true
				});
				objectStore.createIndex('time', 'time', {
					unique: false
				});
				objectStore.createIndex('grade', 'grade', {
					unique: false
				});
			};

			request.onerror = function(event) { //数据库访问错误的回调函数
				console.log('打开数据库时发生错误');
			};

			request.onsuccess = function(event) { //数据库访问成功的回调函数
				db = event.target.result;
				btn.addEventListener('click', function(event) { //监听表单数据
					event.preventDefault();
					date = new Date().toLocaleString()
					const item = {
						time: date,
						grades: counts - 1
					};
					console.log('item=', item);
					const transaction = db.transaction(['highScores'], 'readwrite');
					const objectStore = transaction.objectStore('highScores');
					const request = objectStore.add(item);

					request.onsuccess = function() {
						alert(`时间：${date}\n分数：${counts-1}`)
						// date = ''
						counts = 0;
					};

					transaction.oncomplete = function(e) {
						console.log('记录已添加');
					};

					transaction.onerror = function(event) {
						console.log('添加记录时发生错误');
					};
				})
			}
		</script>
	</body>
</html>